@import url('https://fonts.googleapis.com/css2?family=Lora&display=swap');

body {
  font-family: 'Lora', serif;
  color: #2A3D45;
  text-align: center;
}

.logo{
    width: 10%;
    float: left;
    border-radius: 50%;
    border: #2A3D45 solid 1px;
    margin: 10px;
}

.grid-notebook{
    display: grid;
    grid-template-columns: 2fr 1fr 4fr 4fr 4fr 4fr 1fr 2fr;
    grid-template-rows: repeat(27, 1fr);
    margin: 0 5% 5%;
}

.cover{
    grid-column: 2/7;
    grid-row: 1/28;
    background-image: linear-gradient(to bottom, #eee3ce, #efc681 );
    border: #2A3D45 2px solid;
    border-radius: 2%;
    box-shadow: 0px 16px 32px 0px rgba(0,0,0,0.8);
}

h1{
    grid-column: 4/6;
    grid-row: 3/10;
    background-image: linear-gradient(135deg, #f7f8f6, #d0d0d0 );
    background-color: #F0F2EF;
    border: #2A3D45 1px solid;
    padding: 30% 0;
    text-align: center;
    vertical-align: middle;
    font-size: 4vw;
    border-radius: 2%;
}

.grid-notebook A button{
    background-image: linear-gradient(to bottom, #bde2e1, #1cb1ac );
    width: 100%;
    height: 100%;
}

.new-button{
    grid-column: 7/8;
    grid-row: 2/6;
    border: #2A3D45 solid 1px;
}

.themes-button{
    grid-column: 7/8;
    grid-row: 8/12;
    border: #2A3D45 solid 1px;
}

.saved-button{
    grid-column: 7/8;
    grid-row: 14/18;
    border: #2A3D45 solid 1px;
}

.game-button{
    grid-column: 7/8;
    grid-row: 20/24;
    border: #2A3D45 solid 1px;
}

.spiral{
    background-color: #2A3D45;
    grid-column: 1/3;
    border-radius: 20%;
    border: black solid 2px;
}

#one{
    grid-row: 4/5;
}

#two{
    grid-row: 7/8;
}

#three{
    grid-row: 10/11;
}

#four{
    grid-row: 13/14;
}

#five{
    grid-row: 16/17;
}

#six{
    grid-row: 19/20;
}

#seven{
    grid-row: 22/23;
}

#eight{
    grid-row: 25/26;
}

.topnav{
    width: 75%;
    margin: 5% 140px;
    text-align: center;
}

input{
    width: 80%;
    margin: 10px;
    padding: 10px;
}

.topnav form input{
    width: 100%;
    margin: 3%;
    padding: 10px;
    text-align: center;
}

button{
    background-color: #8DCECC;
    border: #2A3D45 solid 1px;
    padding: 10px;
    font-family: 'Lora', serif;
}

button:hover {
    opacity: 0.8;
  }